<template>
    <el-drawer v-model="visible" :with-header="false" :size="1000" destroy-on-close @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main style="padding:20px 20px 20px 20px;margin-bottom: 30px;background:#FFFFFF;" class="">
                <el-container class="is-vertical">
                    <sc-title title="测试记录详情"></sc-title>
                    <div>
                        <button class="noprint printButton" v-print="printer">打印</button>
                    </div>
                    <div id="printContent" style="margin: 20px;">
                        <div class="title-box">
                            <h4>英语水平测试专业报告</h4>
                            <span>打印时间：{{ nowDate }}</span>
                        </div>
                        <div class="item_box personal-info ">
                            <div class="left">
                                <h3>学生信息</h3> 
                                <h3>姓名：{{ info.user ? info.user.name : info.teacher ? info.teacher.name : '' }}</h3> 
                                <h3>性别：{{ info.user ? info.user.gender : info.teacher ? info.teacher.gender : '' }}</h3>
                            </div> 
                            <div class="right">
                                <h3>{{ info.user ? info.user.name : info.teacher ? info.teacher.name : '' }}你好 你的词汇量为：</h3> 
                                <h3>{{ info.words }}</h3> 
                                <h3>相当于<strong style="color: red;">{{ info?.rule?.name }}{{ info?.rule?.level }}水平</strong></h3>
                            </div>
                        </div>
                        <div class="item_box" v-if="ruleList.length > 0" style="padding: 0.4rem 12rem;">
                            <div class="intro_tit">
                                <img src="img/dd.png" alt="" srcset="">
                                <span class="label">各年级英语水平划分表</span>
                                <img src="img/dd.png" alt="" srcset="">
                            </div>
                            <div class="echart_box">
                                <div class="border top1"></div>
                                <div class="echart_item flex_center_center" style="margin-left: 3rem;">
                                    <img class="img1" src="img/charts/11.png" alt="" srcset="">
                                    <div class="text1 flex_center_center" style="bottom:3rem ;">
                                        <span class="font16">level</span>
                                        <span class="font24 bold">A</span>
                                    </div>
                                    <div class="label">{{ ruleList[0].name || '小学' }}</div>
                                </div>
                                
                                <div class="border top2"></div>

                                <div class="echart_item flex_center_center">
                                    <img class="img2" src="img/charts/22.png" alt="" srcset="">
                                    <div class="text1 flex_center_center" style="bottom:9rem ;">
                                        <span class="font16">level</span>
                                        <span class="font24 bold">B</span>
                                    </div>
                                    <div class="label">{{ ruleList[1].name || '初中' }}</div>
                                </div>

                                <div class="border top3"></div>

                                <div class="echart_item flex_center_center">
                                    <img class="img3" src="img/charts/33.png" alt="" srcset="">
                                    <div class="text1 flex_center_center" style="bottom:15rem ;">
                                        <span class="font16">level</span>
                                        <span class="font24 bold">C</span>
                                    </div>
                                    <div class="label">{{ ruleList[2].name || '高中' }}</div>
                                </div>

                                <div class="border top4"></div>

                                <div class="echart_item flex_center_center">
                                    <img class="img4" src="img/charts/44.png" alt="" srcset="">
                                    <div class="text1 flex_center_center"  style="bottom:19rem ;">
                                        <span class="font16">level</span>
                                        <span class="font24 bold">D</span>
                                    </div>
                                    <div class="label">{{ ruleList[3].name || '托福雅思' }}</div>
                                </div>
                                <div class="echart_item1">
                                    <div class="number" style="top:2rem">{{ ruleList[3].minimumNumber || 0 }} </div>
                                    <div class="number" style="top:8rem">{{ ruleList[2].minimumNumber || 0 }}</div>
                                    <div class="number" style="top:14rem">{{ ruleList[1].minimumNumber || 0 }}</div>
                                    <div class="number" style="top:20rem">{{ ruleList[0].minimumNumber || 0 }}</div>
                                    <div class="label"></div>
                                </div>
                            </div>
                        </div>
                        <div class="item_box" style="padding: 2.4rem 12rem;">
                            <div class="intro_tit">
                                <img src="img/dd.png" alt="" srcset="">
                                <span class="label">测评结果柱状对比图</span>
                                <img src="img/dd.png" alt="" srcset="">
                            </div>
                            <p class="echartsTitle flex_center_between" style="margin-top: 4rem;"><span>高中高级水平</span><span>{{ info?.highSchoolRule?.words || 3500 }}</span> </p>
                            <el-progress :text-inside="true" :stroke-width="26" stroke-linecap="square" text-color="#0B9AFF" color="#0B9AFF" :percentage="info?.highSchoolRule?.words/8000*100||3500/8000*100"></el-progress>

                            <p class="echartsTitle flex_center_between"><span>现实掌握词汇量</span><span>{{ info.words }}</span> </p>
                            <el-progress :text-inside="true" :stroke-width="26" text-color="#F69B2C" color="#F69B2C" stroke-linecap="square" :percentage="info?.words/8000*100"></el-progress>
                        </div>
                        <div class="item_box">
                            <div class="intro_tit">
                                <img src="img/dd.png" alt="" srcset="">
                                <span class="label">语言能力</span>
                                <img src="img/dd.png" alt="" srcset="">
                            </div>
                            <p class="content" v-html="info.rule && info.rule.languageAbility"></p>
                        </div>
                        <div class="item_box">
                            <div class="intro_tit">
                                <img src="img/dd.png" alt="" srcset="">
                                <span class="label">测评分析</span>
                                <img src="img/dd.png" alt="" srcset="">
                            </div>
                            <p class="content" v-html="info.rule && info.rule.evaluationAnalysis"></p>
                        </div>
                        <div class="item_box">
                            <div class="intro_tit">
                                <img src="img/dd.png" alt="" srcset="">
                                <span class="label">学习建议</span>
                                <img src="img/dd.png" alt="" srcset="">
                            </div>
                            <p class="content" v-html="info.rule && info.rule.learningAdvice"></p>
                        </div>
                    </div>
                </el-container>
            </el-main>
            <el-footer>
                <el-button @click="visible=false">关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
    components: {
        scEcharts
    },
    setup() {
        const printer = {
            id: "printContent",
            popTitle: "词汇测试结果",
        };
        return {
            printer
        }
    },
    data() {
        return {
            visible: false,
            loading: false,
            info: {},
            infoId: null,
            activeName: 'first',
            nowDate: '',
            image: null,
            ruleList: [],
            option :{
                tooltip: {
                    show:true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['高中高级水平', '现实掌握词汇量'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        max: 8000,
                        maxInterval: 1000,
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'bar',
                        barWidth: '60%',
                        data: [
                            {
                                value: 3500,
                                itemStyle: {
                                    color: '#0B9AFF',
                                }
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: '#F69B2C',
                                }
                            }
                        ]
                    }
                ]
            },
        }
    },
    methods: {
        open(id) {
            this.visible = true
            this.infoId = id
            this.getDate()
            this.getData(id)
        },
        getEchartsImg() {
            let canvas = document.querySelector("canvas");
            this.image = canvas.toDataURL("image/png"); 
        },
        getDate() {
            let date = new Date();
            let seperator1 = "-";
            let seperator2 = ":";
            let month = date.getMonth() + 1;
            if (month < 10) {
                month = "0" + month;
            }
            let strDate = date.getDate();
            if (strDate < 10) {
                strDate = "0" + strDate;
            }
            let hour = date.getHours();
            if (hour < 10) {
                hour = "0" + hour
            }
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();
            if (minutes < 10) {
                minutes = "0" + minutes
            }
            if (seconds < 10) {
                seconds = "0" + seconds
            }
            this.nowDate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + hour + seperator2 + minutes
                + seperator2 + seconds;
        },
        async getData(id) {
            this.loading = true
            await this.$API.vocabularyExam.action.get({id: id}).then((res) => {
                this.loading = false
                this.info = res.data
                this.ruleList = this.info.ruleList
            }, () => {
                this.loading = false
            })
        },
        handleSuccess() {
            this.getData(this.user.id)
        }
    }
}
</script>

<style lang="scss" scoped>
.flex_center_center{

    display:flex;
    align-items: center;
    justify-content:center;
    flex-direction: column;

}
::v-deep .el-progress-bar__innerText{
    display: none;
}
.title {
    font-size: 14px;
    padding-left: 6px;
    font-weight: 500;
    padding-bottom: 20px;
}
.title-box {
    width: 100%;
    height: 160px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

h1 {
    margin: 10px;
}

.title-box h4 {
    font-size: 32px;
}

.title-box span {
    height: 30px;
    line-height: 30px;
}

.printButton {
    width: 100px;
    height: 30px;
    border-radius: 4px;
    background: #ff9900;
    color: #fff;
    font-size: 12px;
    float: right;
    border: 1px solid #ccc;
    margin-left: 20px;
    cursor: pointer;
}

.personal-info {
    height: 200px;
}

.personal-info .left {
    height: 100%;
    width: 45%;
    font-size: 20px;
    float: left;
    margin-right: 5%;
}

h2 {
    /* border-left: 4px solid #35aed8; */
    font-size: 20px;
    padding-left: 5px;
    font-weight: 700;
    text-align: left;
    height: 20px;
    line-height: 20px;
    margin: 18px;
}

h3 {
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    margin-top: 7px;
    margin-left: 18px;
    /* border-bottom: 1px solid #ccc; */
}


p {
    font-size: 14px;
    width: 95%;
    line-height: 1.8em;
    text-align: justify;
    margin-top: 0;
    margin-left: 20px;
    margin-bottom: 10px;
}

.personal-info .right {
    font-size: 20px;
    height: 100%;
    width: 50%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
}

.box {
    width: 700px;
    margin: 0 auto;
    /* border-radius: 12px;
    border: 1px solid #ddd; */
    /* background-color: #FFFFFF; */
    /* margin-bottom: 30px; */
}

.item_box{
    border-radius: 1.0rem;
    background: #FFFFFF;
    padding: 2.4rem;
    text-align: center;
    margin-bottom: 1.6rem;
   .echartsTitle{
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1rem;
   }
   .echart_box{
        // height: 24rem;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        position: relative;
        margin-top: 6rem;
        .border{
            position: absolute;
            width: 100%;
            border: 1px dashed #DADDE5;
        }
        
        .top1{top: 4rem;}
        .top2{top: 10rem;}
        .top3{top: 16rem;}
        .top4{top: 22rem;}
        .echart_item1{ 
            position: relative;height: 24rem;
            .number{
                position: absolute;
                font-size: 14px;
                color: #3A3F5E;
                text-align: left;
                background: #fff;
           }
        }
       .echart_item{
           position: relative;
           z-index: 1;
           .text1{
                position: absolute;
                color: #fff;
           }
           .label{margin-top: .5rem;}
           
           .img1{
                width: 7rem;
                height: 6rem;
           }
           .img2{
                width: 7rem;
                height: 12rem;
           }
           .img3{
                width: 7rem;
                height: 18rem;
           }
           .img4{
                width: 7rem;
                height: 22rem;
           }
        }

   }
    .echartsbox{
        position: relative;
        color: #fff;
        font-size: 1.6rem;
        .text1{
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .text2{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .numtag{
            width: 50%;
            text-align: right;
            color: #3A3F5E;
            font-size: 2.0rem;
            padding: .7rem;
            position: absolute;
            bottom: .6rem;
            right: 0;
        }
        .border{
            border-bottom: .1rem solid #0B9AFF;
        }
        .border1{
            border-bottom: .1rem solid #40D463;
        }
        .border2{
            border-bottom: .1rem solid #F69B2C;
        }
        .border3{
            border-bottom: .1rem solid #FF5252;
        }
    }
    .name1{
      font-size: 2.2rem;
    }
    .name2{
      font-size: 4.0rem;
      font-weight: bold;
      color: #F69B2C;
      margin-top: 1.8rem;
    }
    .num{
      margin-right: 4.0rem;
    }
    .intro_tit{
      .label{
        margin: 0 2.4rem;
        color: #3A3F5E;
        font-size: 1.6rem;
      }
    }
    .content{
      color: #626780;
      font-size: 1rem;
      line-height: 3.0rem;
      margin-top: 1.5rem;
      text-align: left;
    }
}


.testBg {
    background-size: 100% 100%;
    background-image: url(/img/vocabulary.png);
    width: 338px;
    height: 280px;
    /* margin: 20px; */
    position: relative;
    /* border: 0px solid red; */
}

.info {
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.info:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
[data-theme="dark"] .info {
    border-color: #434343;
}
:deep(.el-form-item__content) {
    font-size: 12px !important;
}
:deep(.el-image-viewer__close) {
    background-color: unset;
}
.el-form-item__label {
    text-align: justify;
}

.level-title {
    width:350px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.level-result {
    text-align: center;
    flex: 1;
    font-size: 14px;
    font-weight: bold;
}

.flex_center_between{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>
